import React, { useState, useEffect } from 'react';
import { Form, Row, Col, DatePicker, Input, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { deepCopy, isnullObj } from '../../Control/deepCopy';
import styles from './index.css';

const { RangePicker } = DatePicker;

function RobTicketsForm(props) {
  // 选择目录数据
  const [requiredEntryForms, setrequiredEntryForms] = useState([
    {
      key: '姓名',
      value: '',
      inputType: 1,
      length: 30,
      inputVerifyType: 'BaseInput7',
      required: true,
      isActive: true,
    },
    {
      key: '性别',
      value: '',
      inputType: 4,
      length: '',
      inputVerifyType: '',
      required: true,
      isActive: false,
    },
    {
      key: '图片',
      value: '',
      inputType: 5,
      length: '',
      inputVerifyType: '',
      required: true,
      isActive: false,
      pictureUrl: '',
    },
    {
      key: '手机号',
      value: '',
      inputType: 2,
      length: 11,
      inputVerifyType: 'MobileNoInput',
      required: true,
      isActive: false,
    },
    {
      key: '生日',
      value: '',
      inputType: 3,
      length: '',
      inputVerifyType: '',
      required: true,
      isActive: false,
    },
    {
      key: 'QQ号',
      value: '',
      inputType: 2,
      length: 20,
      inputVerifyType: 'PwdInput5',
      required: true,
      isActive: false,
    },
    {
      key: '邮箱',
      value: '',
      inputType: 1,
      length: 30,
      inputVerifyType: 'BaseInput7',
      required: true,
      isActive: false,
    },
    {
      key: '学院',
      value: '',
      inputType: 1,
      length: 30,
      inputVerifyType: 'BaseInput7',
      required: true,
      isActive: false,
    },
    {
      key: '年级',
      value: '',
      inputType: 1,
      length: 30,
      inputVerifyType: 'BaseInput7',
      required: true,
      isActive: false,
    },
    {
      key: '班级',
      value: '',
      inputType: 1,
      length: 10,
      inputVerifyType: 'BaseInput1',
      required: true,
      isActive: false,
    },
    {
      key: '学号',
      value: '',
      inputType: 1,
      length: 10,
      inputVerifyType: 'BaseInput1',
      required: true,
      isActive: false,
    },
    {
      key: '特长',
      value: '',
      inputType: 1,
      length: 30,
      inputVerifyType: 'BaseInput7',
      required: true,
      isActive: false,
    },
    {
      key: '备注',
      value: '',
      inputType: 1,
      length: 30,
      inputVerifyType: 'BaseInput7',
      required: true,
      isActive: false,
    },
  ]);

  const changeRequiredEntry = (index) => {
    if (index == 0) return;
    let newRequiredEntryForms = [...requiredEntryForms];
    newRequiredEntryForms[index].isActive = !newRequiredEntryForms[index]
      .isActive;
    setrequiredEntryForms(newRequiredEntryForms);
    props.form.setFieldsValue({
      requiredEntryForms: newRequiredEntryForms,
    });
  };

  useEffect(() => {
    if (!isnullObj(props.formData)) {
      // setrequiredEntryForms(props.formData.requiredEntryForms);
      let newAction = [...requiredEntryForms];
      newAction.forEach((item) => {
        props.formData.requiredEntryForms.forEach((element) => {
          if (item.key == element.key) {
            item.isActive = true;
          }
        });
      });
      setrequiredEntryForms(newAction);
      props.formData.requiredEntryForms = newAction;
      props.form.setFieldsValue(props.formData);
    }
  }, []);

  return (
    <div className={styles.RobTicketsForm}>
      <Form
        form={props.form}
        name="RobTicketsForm"
        autoComplete="off"
        initialValues={{
          RobTicketsDate: props.activityDate,
        }}
        // onFinish={finishBasicData}
      >
        <div className={styles.firstDesc}>基本信息</div>

        <Row>
          <Col span={10}>
            <Form.Item
              name={`RobTicketsDate`}
              label={`活动时间`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              rules={[
                {
                  required: true,
                  message: '请选择时间',
                },
              ]}
            >
              <RangePicker
                className={styles.RangePicker}
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
              />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item
              name={`numberLimit`}
              label={`门票数量`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                  message: '请输入正确的数字',
                },
              ]}
            >
              <Input placeholder="不填即无限制" />
            </Form.Item>
          </Col>
        </Row>

        <div className={styles.firstDesc}>选择您希望活动参加者填写的信息</div>

        <Row>
          <Col span={20} className={styles.requiredEntryForms}>
            {requiredEntryForms.map((recond, index) => {
              return (
                <div
                  key={recond.key}
                  className={`${recond.isActive ? styles.action : ''}`}
                >
                  <Button
                    className={styles.requiredEntry}
                    onClick={() => changeRequiredEntry(index)}
                  >
                    {recond.key}
                  </Button>
                </div>
              );
            })}
          </Col>
        </Row>

        <div className={styles.firstDesc}>可添加补充项目</div>

        <Row className={styles.optionalEntryForms}>
          <Form.List name="optionalEntryForms">
            {(fields, { add, remove }) => {
              return (
                <>
                  {fields.map((field, index) => {
                    return (
                      <Row
                        className={styles.activityPlanningLi}
                        key={field.key + 'Row'}
                      >
                        <Form.Item
                          {...field}
                          label={`项目名称`}
                          key={field.key + 'scheduleName'}
                          name={[field.name, 'key']}
                          fieldKey={[field.fieldKey, 'scheduleName']}
                          rules={[
                            {
                              required: true,
                              message: '项目名称',
                            },
                          ]}
                          style={{ margin: '0 8px 0 0' }}
                        >
                          <Input
                            className={styles.StandardWidth}
                            placeholder="请输入日程名称"
                          />
                        </Form.Item>
                        <DeleteOutlined
                          onClick={() => remove(field.name)}
                          style={{ color: '#d81e06' }}
                        />
                      </Row>
                    );
                  })}
                  <Col span={10}>
                    <Form.Item>
                      <Button
                        className={styles.StandardWidth}
                        type="dashed"
                        onClick={() => add()}
                        block
                      >
                        + 添加
                      </Button>
                    </Form.Item>
                  </Col>
                </>
              );
            }}
          </Form.List>
        </Row>
      </Form>
    </div>
  );
}
export default RobTicketsForm;
